<!--
 * @Author: yao
 * @Date: 2024-11-15 17:40:08
 * @LastEditTime: 2024-11-19 11:29:38
 * @LastEditors: yao
 * @Description: 
 * @FilePath: \jdev-web\src\Layouts\BaseLayout.vue
-->
<template>
  <div class="J_layout">
    <header class="Layout_header">
      <div>
        <img
          src=""
          style="margin: 0 10px;height: 30px; width: 30px;" />
        <span style="font-size: 1.2rem;">星辰·济世医疗大模型中台</span>
      </div>
      <ThemeSwitcher></ThemeSwitcher>
    </header>
    <div class="Layout_container">
      <MenuContent />
      <div class="Layout_content">
        <Breadcrumb class="breadcrumb" :home="home" :model="items" />
        <Card class="main_content">
          <router-view v-slot="{ Component, route }">
            <transition name="scale" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </Card>
      </div>
    </div>
  </div>
  <Toast />
</template>
<script setup lang='ts'>
import { ref, reactive } from 'vue'
import MenuContent from './MenuContent.vue';

const home = ref({
  icon: 'pi pi-home'
});
const items = ref([
  { label: 'Electronics' },
  { label: 'Computer' },
  { label: 'Accessories' },
  { label: 'Keyboard' },
  { label: 'Wireless' }
]);



</script>
<style scoped lang='scss'>
.J_layout {
  display: flex;
  flex: auto;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  height: 100vh;
  background-color: var(--card-bg);

  .Layout_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    height: 64px;
    padding: 0 50px 0 10px;
    background-color: var(--card-bg);
  }

  .Layout_container {
    flex-direction: row;
    display: flex;
    flex: auto;
    min-height: 0;


    .Layout_content {
      padding: 0 2rem 1.5rem;
      box-sizing: border-box;
      border-top: 1px solid var(--surface-border);
      border-left: 1px solid var(--surface-border);
      overflow: auto;
      background-color: var(--surface-ground);
      border-top-left-radius: 30px;
      box-shadow: inset 0 3px 4px #0000001a;
      display: flex;
      flex: auto;
      flex-direction: column;
      min-height: 0;

      .breadcrumb {
        background: transparent;
      }

      .main_content {
        background: var(--card-bg);
        padding: 1.2rem;
        flex: auto;

        .scale-enter-active,
        .scale-leave-active {
          transition: all 0.3s ease;
        }

        .scale-enter-from,
        .scale-leave-to {
          opacity: 0;
          transform: scale(0.9);
        }
      }
    }
  }
}
</style>